<template>
	<div id="app">
		<!-- banner -->
		<div class="ban" :style="'height:338px;background-image: url('+banImg+');background-size:cover;'">
		    <div class="txt" style="padding-top:99px;">
		        <div class="wp">
		            <h3>设计师项目对接</h3>
		            <div class="desc">
		                <p>游戏UI外包专有资源，非常适合平台上的设计外包公司、全职、兼职等</p>
		            </div>
		            <a class="myfancy" @click="showAdd">免费发布外包</a>
		        </div>
		    </div>
		</div>
		<!-- banner -->
		<!-- 内容 -->
		<div class="main">
		    <div class="wp">
		        <div class="g-boxq2">
		            <div class="m-topl">
		                <ul class="ul-listl3 ls">
		                    <li>
		                        <a @click="toHome" class="con">首页</a>
		                    </li>
		                    <li>
		                        <a @click="toJob" class="con">我的职位</a>
		                    </li>
		                    <li>
		                        <a @click="toPublishJob" class="con">发布职位</a>
		                    </li>
		                    <li class="on">
		                        <a class="con">项目外包</a>
		                    </li>
		                </ul>
		            </div>
		            <div class="m-sobox">
						<el-row>
						  <el-col :span="24">
							<div class="form" style="display:flex;justify-content:space-between;">
								
									<div class="ll" style="width:100%;position:relative;">
										<input type="text" class="inp" placeholder="搜索关键字..." v-model="projectListParam.title" @keyup="goSearch"/>
										

										<i v-if="projectListParam.title" style="right:0;" @click="resetSearch" class="iconfont el-icon-close clear-btn"></i>
									</div>
								<div class="rr">
										<!-- <el-dropdown style="margin-right: 5px;">
										  <span class="el-dropdown-link">
											{{projectType}}<i class="el-icon-arrow-down el-icon--right"></i>
										  </span>
										  <el-dropdown-menu slot="dropdown">
											  <el-dropdown-item @click.native="projectTypeChange('')">全部</el-dropdown-item>
											<el-dropdown-item v-for="(item,i) in projectTypeList" :key="i" @click.native="projectTypeChange(item.title)">{{item.title}}</el-dropdown-item>
										  </el-dropdown-menu>
										</el-dropdown> -->
										<el-select v-model="projectType" @change="changeProjectType" class="need-el-select" clearable placeholder="需求类型" style="width: 100%;">
											<el-option
											key="全部"
											label="全部"
											value="">
											</el-option>

											<el-option
											v-for="item in projectTypeList"
											:key="item.title"
											:label="item.title"
											:value="item.title">
											</el-option>
										</el-select>
									</div>
							</div>
						</el-col>
						<!-- <el-col :span="3"><el-button type="primary" style="width: 100%; margin-top: 3px; margin-left: 10px;" @click="getProjectList()">搜索</el-button></el-col> -->
						</el-row>
		            </div>
		            <div class="m-demand">
		                <div class="g-titq3">
		                    <h3>所有需求</h3>
		                </div>
		                <ul class="ul-txtq3">
		                    <li v-for="(item,i) in projectList" :key="i" @click="showDetails(item.id)" >
		                        <div class="con myfancy">
		                            <h3 style="display:flex;justify-content:space-between;">{{item.title}}<div class="tit">
		                                <div class="rr">
		                                    <span v-if="item.type">{{item.type}}</span><span v-if="item.spec">{{item.spec}}</span>
		                                </div>
		                            </div>
									</h3>
		                            <span class="date">发布时间：{{getTime(item.createTime)}}</span>
		                            <div class="info">
		                                <span>预算<em class="e2">{{item.minPrice}}-{{item.maxPrice}}元/张</em></span>
		                                <span>截止时间<em>{{getTime(item.endTime)}}</em></span>
		                            </div>
		                            <div class="desc" v-html="item.description">
		                            </div>
		                        </div>
		                    </li>
		                </ul>
		            </div>
		            <!-- 页码 -->
		            <div class="pages qm" v-if="projectList.length>0">
		                <el-pagination
		                  background
		                   @size-change="changeSizeHandle" @current-change="currentChangeHandle"
		                        :current-page="currentPage"  :page-size="projectListParam.pageSize"
		                  layout="prev,pager,next"
		                  :total="total">
		                </el-pagination>
		            </div>
		        </div>
		    </div>
		    <!-- 弹窗 -->
		    <div class="m-pop" style="display: block;" v-if="publishShow">
		        <div class="pop-bg"></div>
		        <div class="inner qm custom-scroll">
		            <a @click="cancelAdd" class="close"></a>
		            <div class="m-win">
		                <h2>发布需求</h2>
		                <div class="m-formq1">
		                    <div class="items items2">
		                        <div class="item">
		                            <span class="left">项目名称</span>
		                            <div class="right">
		                                <input type="text" class="inp inp3" placeholder="例如：二次元游戏UI全套方案设计" v-model="addProjectParam.title"/>
		                                <span class="num">0/30</span>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="items items2">
		                        <div class="item">
		                            <span class="left">描述</span>
		                            <div class="right">
		                                <div class="tar">
		                                    <!-- <textarea placeholder="例如：1、游戏UI风格方案1套，LOGO设计1套，全套界面100个，图标300个。" v-model="addProjectParam.description"></textarea> -->
											<quillEditor class="rmk-quill-editor" v-model="addProjectParam.description" :options="quillEditorOption"></quillEditor>
		                                    <span class="num">0/500</span>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="items">
		                        <div class="item">
		                            <span class="left">需求类型</span>
		                            <el-select v-model="addProjectParam.type" clearable placeholder="需求类型" style="width: 100%;">
		                            	<el-option
		                            	  v-for="item in projectTypeList"
		                            	  :key="item.title"
		                            	  :label="item.title"
		                            	  :value="item.title">
		                            	</el-option>
		                            </el-select>
		                        </div>
		                        <div class="item">
		                            <span class="left">风格要求</span>
		                            <el-select v-model="addProjectParam.spec" clearable placeholder="风格要求" style="width: 100%;">
		                            	<el-option
		                            	  v-for="item in projectStyleList"
		                            	  :key="item.title"
		                            	  :label="item.title"
		                            	  :value="item.title">
		                            	</el-option>
		                            </el-select>
		                        </div>
		                    </div>
		                    <div class="items">
		                        <div class="item">
		                            <span class="left">截稿日期</span>
									<el-date-picker
									      format="yyyy-MM-dd" :picker-options="pickerOptions"
									      v-model="addProjectParam.endTime"
										  @change="dateChange"
									      type="date"
									      placeholder="选择日期" style="width: 100%;">
									</el-date-picker>
		                            <!-- <div class="right">
		                                <input type="date" class="inp inp3" placeholder="请选择日期" id="test1" v-model="addProjectParam.endTime">
		                            </div> -->
		                        </div>
		                        <div class="item">
		                            <span class="left">反馈时间要求</span>
		                            <el-select v-model="addProjectParam.feedback" clearable placeholder="反馈时间要求" style="width: 100%;">
		                            	<el-option
		                            	  v-for="item in projectFeedbackList"
		                            	  :key="item.title"
		                            	  :label="item.title"
		                            	  :value="item.title">
		                            	</el-option>
		                            </el-select>
		                        </div>
		                    </div>
		                    <div class="items">
		                        <div class="item">
		                            <span class="left">联系QQ</span>
		                            <div class="right">
										<el-input  placeholder="请填写QQ" v-model="addProjectParam.chatQq"></el-input>
		                            </div>
		                        </div>
		                        <div class="item">
		                            <span class="left">联系微信</span>
		                            <div class="right">
										<el-input  placeholder="请填写微信" v-model="addProjectParam.chatWechat"></el-input>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="items items2">
		                        <div class="item">
		                            <span class="left">单张预算范围</span>
		                            <div class="right">
		                                <dl role="radio">
		                                    <dd v-for="(p,idx) in pricelist" :key="idx" :class="{'custom':p.isCustomer}">
		                                        <label :class="{'checked':idx==currentPrcIdx}" v-if="!p.isCustomer" @click="currentPrcIdx=idx" >
		                                            <input type="radio" value="1"/>
		                                            <span>{{p.min}}-{{p.max}}元/张</span>
		                                        </label>
												<label :class="{'checked':idx==currentPrcIdx}" @click="currentPrcIdx=idx" v-else >
		                                            <input type="radio" checked value="4"/>
		                                            <span>自定义</span>
		                                            <div class="tt">
		                                                <input type="number" v-model="p.min"/>
		                                                <em>至</em>
		                                                <input type="number" v-model="p.max"/>
		                                                <em>元/张</em>
		                                            </div>
		                                        </label>
		                                    </dd>
		                                </dl>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		                <div class="bottom submit-job-btnbox">
		                    <a class="free-btn" @click="addProject">免费发布</a>
		                    <a class="cancel" @click="cancelAdd">取消</a>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div class="m-pop" id="m-win2" style="display: block;" v-show="detailsShow">
		        <div class="pop-bg"></div>
		        <div class="inner qm2 custom-scroll">
		            <a @click="cancelDetails" class="close"></a>
		            <div class="m-win">
		                <div class="top">
		                    <h3>{{projectListDetailsResult.title}}</h3>
		                    <span>发布时间：{{projectListDetailsResult.createTime}}</span>
		                </div>
		                <div class="box">
		                    <div class="col-r">
		                        <div class="user">
		                            <span>关于雇主</span>
		                            <a target="_blank" :href="'/personalCenter/'+projectListDetailsResult.member.id" class="tt" style="display:flex;align-items:center;">
		                                <div class="pic"><img :src="projectListDetailsResult.member.avatar?projectListDetailsResult.member.avatar:defaultAvatar" alt="" /></div>
		                                <div class="txt">
		                                    <h3>{{projectListDetailsResult.member.userName}}</h3>
		                                    <!-- <div class="addr">上海 | 徐汇</div> -->
		                                </div>
		                            </a>
		                        </div>
		                        <dl>
		                            <dd>
		                                <h3>截稿日期</h3>
		                                <span>{{getTime(projectListDetailsResult.endTime)}}</span>
		                            </dd>
		                            <dd>
		                                <h3>单张预算</h3>
		                                <span class="s2">{{projectListDetailsResult.minPrice}}-{{projectListDetailsResult.maxPrice}}元/张</span>
		                            </dd>
		                            <dd>
		                                <h3>风格类型</h3>
		                                <span>{{projectListDetailsResult.spec}}</span>
		                            </dd>
		                            <dd>
		                                <h3>反馈间隔</h3>
		                                <span>{{projectListDetailsResult.feedback}}</span>
		                            </dd>
		                            <dd>
		                                <h3>联系QQ</h3>
		                                <span>{{projectListDetailsResult.chatQq}}</span>
		                            </dd>
		                            <dd>
		                                <h3>联系微信</h3>
		                                <span>{{projectListDetailsResult.chatWechat}}</span>
		                            </dd>
		                        </dl>
		                    </div>
		                    <div class="col-l">
		                        <div class="details">
		                            <div class="tp bdsharebuttonbox">
		                            	<a class="bds_more" data-cmd="more">分享到<i></i></a>
		                                <h3>需求详情</h3>
		                            </div>
		                            <div class="desc" v-html="projectListDetailsResult.description">
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<!-- 内容 -->
	</div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
	import common from '../../../static/utils/common.js';
	import API from '../../../static/utils/API.js';
	import layer from "layui-layer";
	
	import { parseTime } from "../../../static/utils/formatdate.js";
	export default{
		components:{
			layer,quillEditor
		},
		data() {
			return {
				pickerOptions:{
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					},
				},
				quillEditorOption:{
					 placeholder:'例如：1、游戏UI风格方案1套，LOGO设计1套，全套界面100个，图标300个。',
					 modules:{
						 clipboard:{
						 	matchers:[
								['img',this.handleCustomerMatcher]
							]
						},
						toolbar:{
							container:[
								['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
								['blockquote', 'code-block'],                      //引用，代码块
								[{ 'header': 1 }, { 'header': 2 }],               // 几级标题
								[{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 有序列表，无序列表
								[{ 'script': 'sub'}, { 'script': 'super' }],      // 下角标，上角标
								[{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
								[{ 'direction': 'rtl' }],                         // 文字输入方向
								[{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
								[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
								[{ 'color': [] }, { 'background': [] }],          // 颜色选择
								[{ 'font': [] }],// 字体
								[{ 'align': [] }], // 居中
								['clean'],
								 ['link', 'image', 'video']
							]
						}
					 }
				 },
				defaultAvatar:require('../../assets/images/imgl1.png'),
				pricelist:[
					{min:800,max:1500},
					{min:2000,max:4000},
					{min:4000,max:10000},
					{min:'',max:'',isCustomer:true}
				],
				currentPrcIdx:-1,
				banImg:require('../../assets/images/banq1.jpg'),
				projectTypeParam: {
					type: 'project_type',
				},
				projectTypeList: [],
				projectStyleParam: {
					type: 'project_style',
				},
				projectStyleList: [],
				projectFeedbackParam: {
					type: 'project_feedback',
				},
				projectFeedbackList: [],
				projectListParam: {
					pageNum: 1,
					pageSize: 10
				},
				projectList: [],
				total: 0,             // 总条数，根据接口获取数据长度(注意：这里不能为空)
				currentPage: 1,
				addProjectParam: {
					title: '',
					description: '',
					type: '',
					spec: '',
					feedback: '',
					endTime: '',
					chatQq: '',
					chatWechat: '',
					minPrice: 0,
					maxPrice: 0
				},
				ys: '4',
				publishShow: false,
				detailsShow: false,
				projectListDetailsParam: {
					id:''
				},
				projectListDetailsResult: {
					member:{

					}
				},
				projectType:'需求类型'
			}
		},
		watch: {
			$route(a, b) {
				if(this.$route.params.str=='create'){
					this.publishShow=true;
				}
			}
		},
		mounted() {
			if(this.$route.params.str=='create'){
				this.publishShow=true;
			}
			this.getProjectTypeList()
			this.getProjectStyleList()
			this.getProjectFeedbackList()
			this.getProjectList()

			if(window._bd_share_main){
				window._bd_share_main.init();
			}else{
				window._bd_share_config={
				"common":{
					"bdSnsKey":{},
					"bdText":"",
					"bdMini":"1",
					"bdMiniList":false,
					"bdPic":"",
					"bdStyle":"1",
					"bdSize":"24"
					},
					"share":{}
				};
				const s = document.createElement('script');
				s.type = 'text/javascript';
				s.src = 'https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
				document.body.appendChild(s)
			}
	    },
		methods: {
			resetSearch(){
				this.projectListParam.title='';
				this.projectListParam.pageNum=1;
				this.projectList=[];
				this.getProjectList();
			},
			changeProjectType(type){
				this.projectType = type?type:'全部';
				this.projectListParam.type = type
				this.projectListParam.pageNum = 1
				this.getProjectList()
			},
			getTime(time){
				 return parseTime(time,"{y}年{m}月{d}日")
			},
			goSearch(e){
				if(e.key=='Enter'){
					this.projectListParam.pageNum=1;
					this.projectList=[];
					this.total=0;
					this.getProjectList();
				}
			},
			showDetails: function (id) {
				this.projectListDetailsParam.id = id
				var that =  this
				common.requestGet(API.projectListDetails,this.projectListDetailsParam,function(result){
					if(result.code == 0){
						that.projectListDetailsResult = result.data
						that.detailsShow = true
					}
				})
			},
			cancelDetails: function () {
				this.detailsShow = false
			},
			projectTypeChange: function (type) {
				this.projectType = type?type:'全部';
				this.projectListParam.type = type
				this.projectListParam.pageNum = 1
				this.getProjectList()
			},
			dateChange(val) {
			  this.addProjectParam.endTime = new Date(val).toLocaleDateString();
			},
			toHome: function(){
				this.$router.push("/recruitHome");
			},
			toJob: function(){
				let token = window.localStorage.getItem('token');
				if(!token){
					this.$parent.showLogin({loginType:0});
					return;
				}
				this.$router.push("/job");
			},
			toPublishJob: function(){
				let token = window.localStorage.getItem('token');
				if(!token){
					this.$parent.showLogin({loginType:0});
					return;
				}
				this.$router.push("/publishJob");
			},
			// toProjectEpiboly: function(){
			// 	this.$router.push("/projectEpiboly");
			// },
			toPublishEpiboly: function(){
				this.$router.push("/publishEpiboly");
			},
			getProjectTypeList:function(){
				var that =  this
				common.requestPost(API.jobAttributeGroup,this.projectTypeParam,function(result){
					if(result.code == 0){
						that.projectTypeList = result.data.project_type
					}
				})
			},
			getProjectStyleList:function(){
				var that =  this
				common.requestPost(API.jobAttributeGroup,this.projectStyleParam,function(result){
					if(result.code == 0){
						that.projectStyleList = result.data.project_style
					}
				})
			},
			getProjectFeedbackList:function(){
				var that =  this
				common.requestPost(API.jobAttributeGroup,this.projectFeedbackParam,function(result){
					if(result.code == 0){
						that.projectFeedbackList = result.data.project_feedback
					}
				})
			},
			// 每页显示的条数改变
			 changeSizeHandle(val) {
				 this.projectListParam.pageSize = val                   // 改变每页显示的条数 
				 this.projectListParam.pageNum = 1              // 注意：在改变每页显示的条数时，要将页码显示到第一页
				 this.currentPage = 1
				 this.getProjectList()                    // 点击每页显示的条数时，显示第一页
			 },
			 // current-change用于监听页数改变，而内容也发生改变
			 currentChangeHandle(val) {
				 $('body,html').animate({
					'scrollTop':0
				}, 0);
				 this.projectListParam.pageNum = val                // 改变默认的页数
				 this.currentPage = val 
				 this.getProjectList()                        // 切换页码时，要获取每页显示的条数
			 },
			getProjectList: function () {
				var that =  this
				common.requestPost(API.projectList,this.projectListParam,function(result){
					if(result.code == 0){
						that.projectList = result.data
						that.total = result.total
					}
				})
		    },
		    addProject: function () {
				var that =  this;
				let _data=Object.assign({},that.addProjectParam);
				if(!_data.title){
					layer.msg('项目名称不能为空');
					return
				}
				if(!_data.description){
					layer.msg('描述不能为空');
					return
				}
				if(!_data.description){
					layer.msg('请选择需求类型');
					return
				}
				if(!_data.description){
					layer.msg('请选择风格要求');
					return
				}
				if(!_data.description){
					layer.msg('请选择截稿日期');
					return
				}
				if(!_data.description){
					layer.msg('请选择反馈时间要求');
					return
				}
				if(that.currentPrcIdx<0){
					layer.msg('请选择或填写预算范围');
					return
				}
				_data.minPrice=that.pricelist[that.currentPrcIdx].min;
				_data.maxPrice=that.pricelist[that.currentPrcIdx].max;

				if(_data.maxPrice <= 0){
					layer.msg('单张预算范围最大值必须大于0!');
					return
				}
				common.requestPost(API.memberProjectAdd,_data,function(result){
					if(result.code == 0){
						that.cancelAdd()
						layer.msg('项目外包发布成功!');
						that.getProjectList()
					}
				})
		    },
		    showAdd:function () {
				let token = window.localStorage.getItem('token');
				if(!token){
					this.$parent.showLogin({loginType:0});
					return;
				}
				this.currentPrcIdx=-1;
				this.addProjectParam= {
					title: '',
					description: '',
					type: '',
					spec: '',
					feedback: '',
					endTime: '',
					chatQq: '',
					chatWechat: '',
					minPrice: 0,
					maxPrice: 0
				}
		    	this.publishShow =  true;

		    },
		    cancelAdd:function () {
				this.publishShow =  false
		    }
		}
	}
</script>

<style scoped>
.m-win .bottom a:hover{
	border:1px solid #000;
	background:inherit;
	color:#000;
}


.m-sobox .rr{
	margin-top:0px !important;
}


.g-titq3 h3{
	font-weight: normal !important;
}

.ul-txtq3 .rr span{
	font-weight:normal;
}
.ul-txtq3 li{
	transition:.3s all linear;
}
.ul-txtq3 li:hover{
	background:#fbfbfb;
	cursor: pointer;
}
.ul-txtq3 .info span{
	width:30%;
}










</style>
